<template>
    <view class="uv-form-item">
        <view class="uv-form-item__body" @tap="clickHandler" :style="[
            $uv.addStyle(customStyle),
            {
                flexDirection:
                    (labelPosition || parentData.labelPosition) === 'left'
                        ? 'row'
                        : 'column',
            },
        ]">
            <!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
            <slot name="label">
                <view class="uv-form-item__body__left" v-if="required || leftIcon || label" :style="{
                    width: $uv.addUnit(labelWidth || parentData.labelWidth),
                    marginBottom:
                        parentData.labelPosition === 'left' ? 0 : '5px',
                }">
                    <!-- 为了块对齐 -->
                    <view class="uv-form-item__body__left__content">
                        <!-- nvue不支持伪元素before -->
                        <text v-if="required" class="uv-form-item__body__left__content__required">
                            *
                        </text>
                        <view class="uv-form-item__body__left__content__icon" v-if="leftIcon">
                            <uv-icon :name="leftIcon" :custom-style="leftIconStyle"></uv-icon>
                        </view>
                        <text class="uv-form-item__body__left__content__label" :style="[
                            parentData.labelStyle,
                            {
                                justifyContent:
                                    parentData.labelAlign === 'left'
                                        ? 'flex-start'
                                        : parentData.labelAlign === 'center'
                                            ? 'center'
                                            : 'flex-end',
                            },
                        ]">
                            {{ label }}
                        </text>
                    </view>
                </view>
            </slot>
            <view class="uv-form-item__body__right">
                <view class="uv-form-item__body__right__content">
                    <view class="uv-form-item__body__right__content__slot">
                        <slot />
                    </view>
                    <view class="item__body__right__content__icon">
                        <slot name="right" />
                    </view>
                </view>
            </view>
        </view>
        <slot name="error">
            <uv-transition :show="true" :duration="100" mode="fade"
                v-if="!!message && parentData.errorType === 'message'">
                <text class="uv-form-item__body__right__message" :style="{
                    marginLeft: $uv.addUnit(
                        parentData.labelPosition === 'top'
                            ? 0
                            : labelWidth || parentData.labelWidth,
                    ),
                }">
                    {{ message }}
                </text>
            </uv-transition>
        </slot>
        <uv-line v-if="borderBottom" :color="message && parentData.errorType === 'border-bottom'
            ? '#f56c6c'
            : '#d6d7d9'
            "></uv-line>
    </view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js'
/**
 * Form 表单
 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
 * @tutorial https://www.uvui.cn/components/form.html
 * @property {String}			label			input的label提示语
 * @property {String}			prop			绑定的值
 * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
 * @property {String | Number}	labelWidth		label的宽度，单位px
 * @property {String}			rightIcon		右侧图标
 * @property {String}			leftIcon		左侧图标
 * @property {String | Object} leftIconStyle 左侧图标的样式
 * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
 *
 * @example <uv-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></uv-form-item>
 */
export default {
    name: 'uv-form-item',
    emits: ['click'],
    mixins: [mpMixin, mixin, props],
    data() {
        return {
            // 错误提示语
            message: '',
            parentData: {
                // 提示文本的位置
                labelPosition: 'left',
                // 提示文本对齐方式
                labelAlign: 'left',
                // 提示文本的样式
                labelStyle: {},
                // 提示文本的宽度
                labelWidth: 45,
                // 错误提示方式
                errorType: 'message',
            },
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            // 父组件的实例
            this.updateParentData()
            if (!this.parent) {
                this.$uv.error('uv-form-item需要结合uv-form组件使用')
            }
        },
        // 获取父组件的参数
        updateParentData() {
            // 此方法写在mixin中
            this.getParentData('uv-form')
        },
        // 移除uv-form-item的校验结果
        clearValidate() {
            this.message = null
        },
        // 清空当前的组件的校验结果，并重置为初始值
        resetField() {
            // 找到原始值
            const value = this.$uv.getProperty(
                this.parent.originalModel,
                this.prop,
            )
            // 将uv-form的model的prop属性链还原原始值
            this.$uv.setProperty(this.parent.model, this.prop, value)
            // 移除校验结果
            this.message = null
        },
        // 点击组件
        clickHandler() {
            this.$emit('click')
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.uv-form-item {
    @include flex(column);
    font-size: 28rpx;
    color: $uv-main-color;

    &__body {
        @include flex;
        padding: 20rpx 0;

        &__left {
            @include flex;
            align-items: center;

            &__content {
                position: relative;
                @include flex;
                align-items: center;
                padding-right: 10rpx;
                flex: 1;

                &__icon {
                    margin-right: 8rpx;
                }

                &__required {
                    position: absolute;
                    left: -18rpx;
                    color: $uv-error;
                    line-height: 40rpx;
                    font-size: 40rpx;
                    top: 6rpx;
                }

                &__label {
                    @include flex;
                    align-items: center;
                    flex: 1;
                    color: $uv-main-color;
                    font-size: 30rpx;
                }
            }
        }

        &__right {
            flex: 1;

            &__content {
                @include flex;
                align-items: center;
                flex: 1;

                &__slot {
                    flex: 1;
                    /* #ifndef MP */
                    @include flex;
                    align-items: center;
                    /* #endif */
                }

                &__icon {
                    margin-left: 10rpx;
                    color: $uv-light-color;
                    font-size: 30rpx;
                }
            }

            &__message__box {
                height: 32rpx;
                line-height: 32rpx;
            }

            &__message {
                margin-top: -12rpx;
                line-height: 48rpx;
                font-size: 24rpx;
                color: $uv-error;
            }
        }
    }
}
</style>
